<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg" mce_href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg" type="image/x-icon"
    />
    <meta name="viewport" content="width=650,user-scalable=no" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <title>欢迎使用微信云托管</title>
    <style>
        .title-logo {
            height: 80px;
        }
        
        .container {
            margin-top: 100px;
        }
        
        .count-button {
            width: 132px;
            box-sizing: border-box;
            margin: 16px 8px;
        }
        
        .count-number {
            font-size: 18px;
            font-weight: bolder;
            margin: 0 8px;
        }
        
        .count-text {
            width: 280px;
            display: flex;
            margin: 0 auto;
            text-align: left;
            height: 40px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            line-height: 40px;
            padding: 0 12px;
        }
        
        .quote {
            font-size: 12px;
        }
        
        .qrcode {
            height: 180px;
            display: block;
            margin: 0 auto;
        }
        
        .title {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="title">
            <img class="title-logo" src="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg" />
            <h1 style="display: inline; margin-bottom: 48px">欢迎使用微信云托管</h1>
        </div>
        <div style="text-align: center">
            <p class="count-text">
                当前计数MySQL：<span class="count-number-mysql"></span>
            </p>
            <div style="display: flex; justify-content: center; margin-bottom: 80px">
                <a class="btn btn-success btn-lg count-button" style="background: #07c160; border: 0" onclick="set_mysql('inc')">计数+1</a
          >
          <a
            class="btn btn-outline-success btn-lg count-button"
            style="background: rgba(0, 0, 0, 0.03); color: #07c160; border: 0"
            onclick="set_mysql('clear')"
            >清零</a
          >
        </div>

        <p class="count-text">
          当前计数Redis：<span class="count-number-redis"></span>
        </p>
        <div
          style="display: flex; justify-content: center; margin-bottom: 80px"
        >
          <a
            class="btn btn-success btn-lg count-button"
            style="background: #07c160; border: 0"
            onclick="set_redis('inc')"
            >计数+1</a
          >
          <a
            class="btn btn-outline-success btn-lg count-button"
            style="background: rgba(0, 0, 0, 0.03); color: #07c160; border: 0"
            onclick="set_redis('clear')"
            >清零</a
          >
        </div>

        <small
          class="text-black-50"
          style="display: flex; justify-content: center; margin-bottom: 16px"
          >扫码加入微信云托管用户群</small
        >
        <img
          class="qrcode middle"
          src="https://qcloudimg.tencent-cloud.cn/raw/89b46988d3cd73d8a56e76a1b82bb377.png"
        />
      </div>
    </div>
  </body>
  <script src="https://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"
  ></script>
  <script>
    init_mysql();
    init_redis();

    function init_mysql() {
      $.ajax("/api/mysql/count", {
        method: "get",
      }).done(function (res) {
        if (res && res.data !== undefined) {
          $(".count-number-mysql").html(res.data);
        }
      });
    }

    function init_redis() {
      $.ajax("/api/redis/count", {
        method: "get",
      }).done(function (res) {
        if (res && res.data !== undefined) {
          $(".count-number-redis").html(res.data);
        }
      });
    }

    function set_mysql(action) {
      $.ajax("/api/mysql/count", {
        method: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({
          action: action,
        }),
      }).done(function (res) {
        if (res && res.data !== undefined) {
          $(".count-number-mysql").html(res.data);
        }
      });
    }

    function set_redis(action) {
      $.ajax("/api/redis/count", {
        method: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({
          action: action,
        }),
      }).done(function (res) {
        if (res && res.data !== undefined) {
          $(".count-number-redis").html(res.data);
        }
      });
    }
  </script>
</html>